<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/11/21 0021
  Time: 下午 6:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>网站后台管理</title>
    <LINK rel="stylesheet" type="text/css" href="<c:url value="/css/mdui.css" />"/>
    <LINK rel="stylesheet" type="text/css" href="<c:url value="/css/test.css" />"/>
    <script language='javascript' src='<c:url value="/js/mdui.js" />'></script>
</head>
<body>
<div class="mdui-container-fluid mdui-color-blue">
    <!--侧边栏-->
    <div class="mdui-drawer-body-left" style="padding-top: 20px;">
        <div class="mdui-drawer mdui-drawer-close " id="drawer" >
            <ul class="mdui-list" >
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
                    <div class="mdui-list-item-content" > <a href="${pageContext.request.contextPath}/menu/item1" >用户管理</a></div>
                </li>
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">star</i>
                    <div class="mdui-list-item-content">视频地址管理</div>
                </li>
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
                    <div class="mdui-list-item-content">用户活跃信息查看</div>
                </li>
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">drafts</i>
                    <div class="mdui-list-item-content">其他</div>
                </li>
                <li class="mdui-subheader">分割线</li>
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">email</i>
                    <div class="mdui-list-item-content">关于</div>
                </li>
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
                    <div class="mdui-list-item-content">帮助</div>
                </li>
            </ul>
        </div>
    </div>
    <!--侧边菜单结束-->
    <!--顶边栏-->
    <div class="mdui-toolbar mdui-color-theme">
        <a href="javascript:void(0);" onclick="onControll()" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
        <span class="mdui-typo-title">网站后台管理</span>
        <div class="mdui-toolbar-spacer"></div>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
    </div>

</div>
</body>
<script>
    var inst = new mdui.Drawer('#drawer');
    var isOpen = false;
    // method
    function onControll() {
        if(!isOpen){
            inst.open();
            isOpen = true;
        }else{
            inst.close();
            isOpen = false;
        }
    }
    // event
    var drawer = document.getElementById('drawer');
    drawer.addEventListener('open.mdui.drawer', function () {
        console.log('open');
        isOpen = true;
    });
    drawer.addEventListener('opened.mdui.drawer', function () {
        console.log('opened');

    });
    drawer.addEventListener('close.mdui.drawer', function () {
        console.log('close');
        isOpen  = false;
    });
    drawer.addEventListener('closed.mdui.drawer', function () {
        console.log('closed');
    });


</script>
</html>
